<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<title>TzMarlon</title>

		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_1464512820_8751209.css" />
		<script type="text/javascript">
			var basePath = "";
		</script>
		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="js/ke_util.js"></script>
		<script type="text/javascript" src="js/tm_Admin.js"></script>

		<style>
			#container {
				margin: 0px auto;
				position: relative;
			}
			
			.items {
				position: absolute;
				box-shadow: 3px 2px 1em #ccc;
				background: #fff;
				border: 4px solid #fff;
			}
			
			.items:hover {
				box-shadow: 5px 3px 1em #141414;
				border: 4px solid #ccc;
			}
			
			.items p {
				padding: 10px;
				width: 270px;
				font-size: 12px;
				background: #fff
			}
			
			#loader {
				width: 100%;
				height: 60px;
				background: url('images/loader.gif') no-repeat center #FFF;
				position: fixed;
				bottom: 0;
				left: 0;
				display: none;
			}
		</style>
	</head>

	<body style="background:url(images/bg2.jpg)">
		<!--头部-->

		<div class="header">
			<div class="heardbox">
				<div class="c_left">

					<a href="" class="logo"><i class="iconfont icon-logo fz32" style="color:#0C0A0A"></i></a>
					<ul class="nav">
						<li>
							<a href="index.html"><i class="iconfont icon-home"></i>首页</a>
						</li>
						<li>
							<a href="article_list.html"><i class="iconfont icon-zhuanti"></i>专题</a>
						</li>
						<li>
							<a href="#"><i class="iconfont icon-community"></i>社区</a>
						</li>
						<li>
							<a href="music_index.html"><i class="iconfont icon-single"></i>单曲</a>
						</li>
					</ul>
					<div class="clearfix"></div>
					<!--清除浮动  -->
				</div>
				<div class="c_right" id="userbox"></div>
				<div class="clearfix"></div>
				<!--清除浮动  -->
			</div>
		</div>
		<div class="clearfix"></div>
		<!--清除浮动  -->
		<!-- 内容区 -->
		<div class="wrapbox mt120">
			<div class="w_left">
				<!-- 头部信息 -->
				<div class="cheader"></div>
				<!-- 内容区域 -->
				<!--div.items{$}*10-->
				<div id="container"></div>
				<div id="loader"></div>
			</div>
		</div>
		<script>
			$(function() {
				/*
				 	 案例：瀑布流
				 	 1:高度是自动伸缩.宽度固定
				 	 2:定位布局，讲究就改变每一个元素的top和left位置即可。
				 	 3:间距的设定
				 */
				//容器对象
				var $container = $("#container");
				var $loader = $("#loader");

				//固定宽度
				var width = 290;
				//间距
				var space = 16;
				//真实距离
				var outerWidth = width + space;
				//求列数
				var cells = 0;

				//数据url===百度===JSON加密与解密
				var sUrl = 'http://www.wookmark.com/api/json/popular?callback=?'; //这只是一个测试数据连接地址，最好做完肯定是改成你自己的连接地址
				var pageNo = 0;

				function getCells() {
					//求出列数
					cells = Math.floor(window.innerWidth / outerWidth);
					if(cells < 2) cells = 2;
					if(cells > 4) cells = 4;
					//将容器的宽度用真实的大小进行计算，就完整的宽度
					$container.width(cells * outerWidth - space);
				}

				getCells();

				//定义第一排的图片的位置
				var arrLeft = [];
				var arrTop = [];
				for(var i = 0; i < cells; i++) {
					arrTop.push(0);
					arrLeft.push(i * outerWidth); //固定不变的
				}

				var mark = true;

				function loadData() {
					if(mark) {
						$loader.show();
						mark = false;
						$.getJSON(sUrl, {
							page: pageNo
						}, function(data) {
							data.forEach(function(obj, index) {
								//计算出图片宽度缩小以后的比例，用户计算高度的缩放比例.
								var sbit = width / obj.width;
								var iheight = obj.height * sbit;
								//创建一个div
								var $div = $("<div/>");
								//获取到最小的位置,下一元素将放在位置最短的位置后面
								var minindex = getMinIndex(arrTop);
								//放一张图片
								$div.addClass("items").animate({
									left: arrLeft[minindex],
									top: arrTop[minindex]

								}, "slow").html("<p><a href='javascript:void(0)' class='headpic' onclick=''></a><span>用户名</span><span>几天前</span></p><a href='" + obj.url + "' title='" + obj.title + "' target='_blank'><img src='" + obj.preview + "' width='" + width + "' height='" + iheight + "'/></a><p>'" + obj.title + "'</p><p class='info'><span>评论数<i class='iconfont icon-dianping'></i></span><span>点击数<i class='iconfont icon-hit'></i></span></p>");
								//添加到容器中
								$container.append($div);
								//累加的目的，是决定下一个元素的top的起点。
								arrTop[minindex] += $div.height() + space;
							});
							mark = true;
							$loader.hide();
						});
					}
				};

				loadData();

				//滚动加载数据
				$(window).on("scroll", function() {
					//获取滚动条的位置
					var sheight = $(window).scrollTop() + $(window).innerHeight();
					//最小距离
					var minindex = getMinIndex(arrTop) + $container.offset().top; //最小位置
					if(minindex < sheight && mark) {
						pageNo++;
						loadData();
					}
				});

				//滚动加载数据
				$(window).on("resize", function() {
					var oldCells = cells;
					getCells();
					//原来的列和现在的列一样就返回不执行
					if(oldCells == cells) return;
					arrLeft = [];
					arrTop = [];
					for(var i = 0; i < cells; i++) {
						arrTop.push(0);
						arrLeft.push(i * outerWidth)
					}

					//缩小的时候也要加载数据
					var maxHeight = $(window).scrollTop() + $(window).innerHeight();
					var minIndex = getMinIndex(arrTop);
					if(arrTop[minIndex] + $container.offset().top < maxHeight) {
						pageNo++;
						loadData();
					}

					//获取现有的元素进行交换位置
					var $items = $container.find(".items");
					$items.each(function() {
						var minindex = getMinIndex(arrTop);
						//设定位置
						$(this).stop(true, true).animate({
							left: arrLeft[minindex],
							top: arrTop[minindex]
						}, "slow");
						//替换数组中的高度
						arrTop[minindex] += $(this).height() + space;
					});

				});
			});

			/*找到数组最小元素坐在的位置和元素*/
			function getMinIndex(arr) {
				var value = arr[0];
				var index = 0;
				for(var i = 1; i < arr.length; i++) {
					if(arr[i] < value) {
						value = arr[i];
						index = i;
					}
				}
				return index;
			};
		</script>
	</body>

</html>